<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/element_ui.css">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div class="side container" width="200px">
            <el-menu default-active="1" @select="menu_select">
                <el-menu-item index="1">
                    <i class="el-icon-search"></i>
                    <span slot="title">漫画搜索</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <i class="el-icon-notebook-1"></i>
                    <span slot="title">我的漫画</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <i class="el-icon-setting"></i>
                    <span slot="title">设置</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="main container">
            <div class="book-collection">
                <div class="book-card" v-for="book in book_collection">
                    <!-- <img :src="book.cover_url" :alt="book.title" class="book-cover"> -->
                    <img src="media/default.jpg" :alt="book.title" class="book-cover">
                    <div class="book-panel">
                        <div class="book-info">
                            <h1 class="book-title">{{book.title}}</h1>
                            <div class="book-chapter">
                                <span class="book-chapter-label">章节数量</span>
                                <span class="book-chapter-count">{{book.chapter_count}}</span>
                            </div>
                            <span class="book-state">
                                {{covnert_book_state(book.state)}}
                            </span>
                        </div>
                        <div class="book-operation">
                            <el-button type="primary">浏览</el-button>
                            <el-button type="success">下载</el-button>
                            <el-button type="info">详情</el-button>
                            <el-button type="danger">删除</el-button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</body>
<script src="js/vue.js"></script>
<script src="js/element_ui.js"></script>
<script src="js/components.js"></script>
<script>
    collection_api="http://127.0.0.1:9999/collection"
    DEBUG=true
    function log(msg){
        if (DEBUG){
            console.log(msg)
        }
    }

    new Vue({
        el: '#app',
        data() {
            return {
                visible: false,
                book_collection:[]
            }
        },
        mounted(){
            this.get_book_collection()
        },
        methods:{
            get_book_collection(){
                fetch(collection_api)
                .then(res=>res.json())
                .then(data=>{
                    log('get book data')
                    log(data)
                    this.book_collection=data
                })
            },
            menu_select(index,indexPath){
                switch (index) {
                    case '2':
                        this.get_book_collection()
                        break;
                
                    default:
                        break;
                }
            },
            covnert_book_state(state){
                switch (state) {
                    case 1:
                    case 2:
                        return '未下载'
                        break;
                    case 3:
                        return '下载中'
                        break
                    case 4:
                        return '下载完成'
                    default:
                        break;
                }
            }
        }
    })
</script>

</html>